<template>
  <div class="wrap">
    <div class="head-box">
      <p style="flex: 1">xxx大学学生社团</p>
      <div style="margin-right: 50px">
        <el-button @click="resgPage"> 注册 </el-button>
        <el-button v-if="!userInfo.avatar" @click="loginPage">登录 </el-button>
        <el-button tag="a" @click="adminL"> 后台 </el-button>
      </div>
    </div>
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="rgb(5,49,72)"
        text-color="#fff"
        active-text-color="#ffd04b"
        mode="horizontal"
        :router="true"
      >
        <el-menu-item index="/">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/organization">
          <i class="el-icon-menu"></i>
          <span slot="title">社团介绍</span>
        </el-menu-item>
        <el-menu-item index="/activityList">
          <i class="el-icon-document"></i>
          <span slot="title">社团活动</span>
        </el-menu-item>
        <el-menu-item index="/comment">
          <i class="el-icon-setting"></i>
          <span slot="title">留言板</span>
        </el-menu-item>
        <el-menu-item index="/personal">
          <i class="el-icon-setting"></i>
          <span slot="title">个人中心</span>
        </el-menu-item>
        <el-menu-item
          index="/PersonalInfo"
          v-if="userInfo.avatar"
          class="user-box"
        >
          <img
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="imgUrl + userInfo.avatar"
            alt=""
          />
          <span class="username-box">{{ userInfo.nickname }}</span>
          <span @click="handleLogout" class="quit-box">退出</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      active: this.activeIndex,
      imgUrl: process.env.VUE_APP_IMG_URL,
      userInfo: {},
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    handleLogout() {
      this.$store.dispatch("logout");
      this.$message.success("注销成功");
      // location.href = '#/login'
      this.$router.push(`/`);
      location.reload();
    },
    async getUserInfo() {
      const { data = {} } = await this.$http.getUserInfo();
      if (this.$route.path == "/personal") {
        if (data.code == 401) {
          this.$message.error("您未登录，请登录后查看");
          this.$router.push(`/login`);
          return ;
        }
      }
      console.log(this.$route);
      // console.error(data, 3434)
      this.userInfo = data.data || {};
      // this.model = data;
    },
    loginPage() {
      this.$router.push("/login");
    },
    resgPage() {
      
      this.$router.push("/register");
      // this.$router.push("/personal");
    },
    //跳转到后台
    adminL() {
      window.open("http://localhost:9528/controller/");
    },
    goWhere(router) {
      this.$router.push(router);
    },
  },
  watch: {
    $route() {
      // this.getUserInfo();
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  .head-box {
    align-items: center;
    display: flex;
    font-size: 30px;
    width: 100%;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    background: url(../assets/image/bj_01.jpg) no-repeat;
    background-size: 100% 100%;
    color: #fff;
  }
  .el-col {
    .el-menu-vertical-demo {
      padding-left: 7.5%;
      .user-box:hover {
        background-color: rgb(5, 49, 72) !important;
      }
      .user-box {
        float: right;
        margin-right: 12%;
        .username-box {
          margin: auto 5px;
          font-size: 17px;
        }
        .username-box:hover,
        .quit-box:hover {
          color: rgb(255, 208, 75);
        }
        .quit-box {
          margin-left: 10px;
          font-size: 12px;
          color: #ccc;
        }
      }
    }
  }
}
</style>
